<template>
  <div class="">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-upload
        class="upload-demo"
        drag
        :action="baseUrl"
        :headers="headers"
        accept=".jpg,.png"
        :file-list="fileList"
        :before-upload="beforeAvatarUpload"
        :on-success="handleSuccessFunction"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>

      <!-- <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="editSubmit"
          v-preventReClick="1500"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import asc from "@utils/asc.js"; //加密解密
import { reqImageBatchUpdate } from "@api/api.js";

export default {
  props: ["idList", "addindex", "idListid"],
  components: {},
  data() {
    return {
      dialogVisible: false,
      headers: {
        token: asc.decrypt(sessionStorage.getItem("token")),
      },
      fileList: [],
    };
  },
  computed: {
    title() {
      if (this.addindex == 1) {
        return "平面图上传";
      } else {
        return "平面图批量上传";
      }
    },
  },
  watch: {},
  methods: {
    // 上传文件之前的钩子
    beforeAvatarUpload(file) {
      let isJPG = true;
      let isLt = file.size / 1024 < 20000; // 判断是否小于500Kb
      if (file.type !== "image/png" && file.type !== "image/jpeg") {
        this.uploadDisabled = false;
        this.$modal.notifyWarning("图片只能是 jpg/png 格式!");
        isJPG = false;
        return isJPG;
      } else if (!isLt) {
        this.$modal.notifyWarning("图片大小不能超过20MB! 请重新上传");
        this.uploadDisabled = false;
        isJPG = false;
      }
      return isJPG;
    },
    // 上传成功
    handleSuccessFunction(response, file, fileList) {
      this.image = file.response.data.url;
      this.addSubmit();
    },
    async addSubmit() {
      const res = await reqImageBatchUpdate({
        idList: this.addindex == 1 ? [this.idListid] : this.idList,
        image: this.image,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("上传成功！");
      this.fileList = [];
      this.dialogVisible = false;
      this.$parent.closeEditDialog();
    },
    closeEditDialog() {
      this.dialogVisible = false;
      this.fileList = [];
    },
  },
  created() {
    this.baseUrl = `${this.$baseURL_copy}file/upload`;
  },
  mounted() {},
  deactivated() {
    this.closeEditDialog();
  },
};
</script>

<style lang='less' scoped>
@import url("../../common.less");
.upload-demo {
  text-align: center;
}
::v-deep .el-upload-dragger {
  background: @primaryBgcolor7;
  border: 1px dashed #7367f0;
}
.el-upload-dragger .el-icon-upload {
  color: #7367f0;
}
.el-upload-dragger .el-upload__text em {
  color: #7367f0;
}
//  .el-upload__tip{
//   color: @primaryThemeTxtColor;
// }
</style>